<template>
  <div class="about">
    <h2>关于项目</h2>
    <p>这是一个基于 Monorepo 架构的 Vue3 前端项目演示。</p>
    
    <div class="info-section">
      <h3>项目特点</h3>
      <ul>
        <li>使用 pnpm + lerna-lite + turborepo 构建 Monorepo</li>
        <li>共享公共包：utils、components、styles、composables 等</li>
        <li>统一的依赖管理和版本控制</li>
        <li>支持多应用并行开发和构建</li>
      </ul>
    </div>
    
    <div class="info-section">
      <h3>公共包说明</h3>
      <ul>
        <li><strong>@mo/utils</strong>: 工具函数库</li>
        <li><strong>@mo/components</strong>: 公共组件库</li>
        <li><strong>@mo/styles</strong>: 样式库</li>
        <li><strong>@mo/composables</strong>: Vue3 组合式函数</li>
        <li><strong>@mo/directives</strong>: 自定义指令</li>
      </ul>
    </div>
  </div>
</template>

<script setup>
// 组件逻辑
</script>

<style scoped>
.about {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
}

.info-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: #f9f9f9;
  border-radius: 8px;
}

.info-section h3 {
  color: #409eff;
  margin-bottom: 1rem;
}

.info-section ul {
  list-style: disc;
  padding-left: 1.5rem;
}

.info-section li {
  margin: 0.5rem 0;
  line-height: 1.6;
}
</style> 